<template>
	<view class="popularize">
		<custom-navi :show-home="false" background='rgba(0, 144, 250, 1)'>我的推广码</custom-navi>
		
		<view class="popularize-code">
			<view class="user">
				<view class="user-img"><image src="/static/icon/head.jpg" mode=""></image></view>
				<view class="user-txt">15908800770</view>
			</view>
			<view class="qrimg">
			    <tki-qrcode
			    ref="qrcode"
			    :cid="cid"
			    :val="val"
			    :size="size"
			    :unit="unit"
			    :background="background"
			    :foreground="foreground"
			    :pdground="pdground"
			    :icon="icon"
			    :iconSize="iconsize"
			    :onval="onval"
			    :loadMake="loadMake"
			    :usingComponents="usingComponents"
			    :showLoading="showLoading"
			    :loadingText="loadingText"
			    @result="qrR" />
			</view>
			<view class="hint">使用时出示此码</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default{
		components: {tkiQrcode},
		data(){
			return{
				loadMake:true, // 组件初始化完成后自动生成二维码，val需要有值
				cid:'tki-qrcode-canvas', // canvasId，页面存在多个二维码组件时需设置不同的ID
				size:646, // 生成的二维码大小
				unit:'upx', // 大小单位尺寸
				show:true, // 默认使用组件中的image标签显示二维码
				val:'http://cdn.gek6.cn/fr-uni-app-icon/b2.png', // 要生成的内容
				background:'#000000', // 二维码背景色
				foreground:'#ffffff', // 二维码前景色
				pdground:'#ffffff', // 二维码角标色
				icon:'/static/logo.png', // 二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconsize:40, // 二维码图标大小
				onval:true, // 监听val值变化自动重新生成二维码
				usingComponents:true, // 是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading:true, // 是否显示loading
				loadingText:'二维码生成中	', //loading文字
			}
		},
		onLoad() {
			
		},
		methods:{
			qrR(){
				
			}
		}
	}
</script>

<style lang="scss">
	.popularize{
		&-code{
			width:670rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			border-radius:20rpx;
			margin: 0 auto;
			margin-top: 200rpx;
			padding: 40rpx 18rpx;
			.qrimg{
				width: 646rpx;
				height: 610rpx;
				margin: 0 auto;
			}
			.hint{
				width: 100%;
				text-align: center;
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(112,112,112,1);
				opacity:1;
				margin-top: 50rpx;
			}
			.user{
				display: flex;
				
				margin-bottom: 30rpx;
				&-img{
					width: 120rpx;
					height: 120rpx;
					overflow: hidden;
					border-radius: 50%;
					image{
						width: 100%;
						height: 100%;
					}
				}
				&-txt{
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(3,3,3,1);
					opacity:1;
				}
			}
		}
	}
</style>
